import React, { PureComponent, } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {
  Row, Col, Card, Form, Input, Tabs, Spin, Icon, Button, Modal, message, Table, Tag, DatePicker, InputNumber, Popconfirm
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './Recomm.less';
import moment from 'moment';
import PadRecommItem from 'components/Content/PadRecommItem';

const { TabPane } = Tabs;
const FormItem = Form.Item;


const CreatePage = Form.create()(props => {
  const { modalVisible, form, handleSave, handleCancel, appType } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleSave(fieldsValue);
    });
  };

  return (
    <Modal
      destroyOnClose
      title={'新增推荐页'}
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleCancel(false)}
    >
      {/* <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="类型" style={{ display: 'none' }}>
        {form.getFieldDecorator('appType', {
          initialValue: appType ? appType : 1,
          rules: [{ required: true, message: '请输入类型' }],
        })(<Input placeholder="请输入类型" maxLength="10" />)}
      </FormItem> */}

      <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="页面名称">
        {form.getFieldDecorator('recommName', {
          rules: [{ required: true, message: '请输入页面名称' }],
        })(<Input placeholder="请输入页面名称" maxLength="10" />)}
      </FormItem>

    </Modal>
  );
});



@connect(({ padRecomm, loading }) => ({
  padRecomm,
  loading: loading.models.padRecomm,
}))

@Form.create()
export default class PadRecomm extends PureComponent {
  state = {
    recommPage: {
      recommInfo: {},
      layoutList: [],
      appType: null,
    },
    modalVisible: false,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'padRecomm/fetchRecommList',
      payload: {},
    });
  }

  _search() {
    const { dispatch } = this.props;
    dispatch({
      type: 'padRecomm/fetchRecommList',
      payload: {},
    });
  }

  _changeSts(type, item) {
    const { dispatch } = this.props;
    dispatch({
      type: 'padRecomm/changeSts',
      payload: { recommId: item.recommId, recommSts: type },
      callback: () => this._search()
    });
  }

  _delete(item) {
    let deleteList = [];
    let one = {};
    one['recommId'] = item.recommId;
    deleteList.push(one)

    const { dispatch } = this.props;
    dispatch({
      type: 'padRecomm/deletePadRecomm',
      payload: { recommList: deleteList },
      callback: () => this._search()
    });
  }

  _add(appType) {
    this._setModalVisible(true, appType);
    // this.props.dispatch(routerRedux.push({ pathname: '/content/padRecommPage/new' }));
  }

  _handleSave(fieldsValue) {
    let values = { ...fieldsValue, appType: this.state.appType, layoutList: [] };
    const { dispatch } = this.props;
    dispatch({
      type: 'padRecomm/addRecommPage',
      payload: values,
      callback: (data) => this._addPageBack(data)
    });
  }

  _addPageBack(data) {
    this._setModalVisible(false, null)
    this.props.dispatch(routerRedux.push({ pathname: '/content/padRecommPage/' + data.recommId }));
  }

  _handleCancel() {
    this._setModalVisible(false, null)
  }

  _setModalVisible(flag, appType) {
    this.setState({ modalVisible: flag, appType: appType })
  }

  _edit(item) {
    this.props.dispatch(routerRedux.push({ pathname: '/content/padRecommPage/' + item.recommId }));
  }


  render() {
    const { padRecommList1, padRecommList2, padRecommList3 } = this.props.padRecomm;
    return (
      <PageHeaderLayout title="">
        <Card bordered={false}>
          <Tabs >
            <TabPane tab="小萌早教" key="1" >
              <Row>
                <Button type="primary" onClick={() => this._add(1)}>新增页面</Button>
              </Row>
              <div className={styles.itemContainer}>
                {
                  (padRecommList1.length > 0) ? padRecommList1.map((item, i) =>
                    <PadRecommItem key={item.recommId} item={item} changeSts={(type) => this._changeSts(type, item)}
                      edit={() => this._edit(item)}
                      delete={() => this._delete(item)}
                    />) : null
                }
              </div>
            </TabPane>

            <TabPane tab="小萌绘本" key="2">
              <Row>
                <Button type="primary" onClick={() => this._add(2)}>新增页面</Button>
              </Row>
              <div className={styles.itemContainer}>
                {
                  (padRecommList2.length > 0) ? padRecommList2.map((item, i) =>
                    <PadRecommItem key={item.recommId} item={item} changeSts={(type) => this._changeSts(type, item)}
                      edit={() => this._edit(item)}
                      delete={() => this._delete(item)}
                    />) : null
                }
              </div>
            </TabPane>
            <TabPane tab="萌萌乐视频" key="3">
              <Row>
                <Button type="primary" onClick={() => this._add(3)}>新增页面</Button>
              </Row>
              <div className={styles.itemContainer}>
                {
                  (padRecommList3.length > 0) ? padRecommList3.map((item, i) =>
                    <PadRecommItem key={item.recommId} item={item} changeSts={(type) => this._changeSts(type, item)}
                      edit={() => this._edit(item)}
                      delete={() => this._delete(item)}
                    />) : null
                }
              </div>
            </TabPane>
          </Tabs>

          <CreatePage modalVisible={this.state.modalVisible} appType={this.state.appType}
            handleSave={(fieldsValue) => this._handleSave(fieldsValue)}
            handleCancel={() => this._handleCancel()}
          />
        </Card>
      </PageHeaderLayout>
    )
  }
}